<template>
  <div>
    <div class="app-container dealerdetail_container">
      <div class="page_header gongyuan_header">经销商详情</div>
      <el-tabs v-model="tabTypeInfo" type="card">
        <el-tab-pane label="基本信息" name="basicInfo"></el-tab-pane>
        <el-tab-pane label="责任人信息" name="responsibleInfo"></el-tab-pane>
        <el-tab-pane label="营业信息" name="businessInfo"></el-tab-pane>
        <el-tab-pane label="账户信息" name="accountInfo"></el-tab-pane>
      </el-tabs>
      <div class="detail_page" v-show="tabTypeInfo === 'basicInfo'">
        <div class="row">
          <div class="detail_label gongyuan_content">经销商名称:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerName}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">经销商编号:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerNumber}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">座机/手机:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerPhone}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">运营情况:</div>
          <div class="detail_value gongyuan_content_value">{{dealerStatus}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">分配权重:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerProportion}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">省市区:</div>
          <div
            class="detail_value gongyuan_content_value"
            v-if="formData.dealerAddressData"
          >{{formData.dealerAddressData.province}}/{{formData.dealerAddressData.city}}/{{formData.dealerAddressData.area}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">详细地址:</div>
          <div class="detail_value gongyuan_content_value" v-if="formData.dealerAddressData">{{formData.dealerAddressData.detail}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">经销商类别:</div>
          <div class="detail_value gongyuan_content_value">{{dealerType}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">经销商类型:</div>
          <div class="detail_value gongyuan_content_value">{{dealerFunList}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">经销商权限:</div>
          <div class="detail_value gongyuan_content_value">{{dealerRoleList}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">代理区域:</div>
          <div class="detail_value gongyuan_content_value">
            <div style="margin-bottom: 10px;" v-for="(per,index) of formData.areaData" :key="index">{{per.province}}/{{per.city}}/{{per.area}}</div>
          </div>
        </div>
      </div>

      <div class="detail_page" v-show="tabTypeInfo === 'responsibleInfo'">
        <div class="row">
          <div class="detail_label gongyuan_content">负责人姓名:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerUserName}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">负责人电话:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerUserPhone}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">法人姓名:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerUserFname}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">法人电话:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerUserFphone}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">法人身份证号:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerUserNumber}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">身份证正面:</div>
          <div class="detail_value gongyuan_content_value detail_value_imgList">
            <img v-for="img of formData.dealerUserZimgUrl" :src="img.url" :key="img.name" />
          </div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">身份证正面:</div>
          <div class="detail_value gongyuan_content_value detail_value_imgList">
            <img v-for="img of formData.dealerUserFimgUrl" :src="img.url" :key="img.name" />
          </div>
        </div>
      </div>

      <div class="detail_page" v-show="tabTypeInfo === 'businessInfo'">
        <div class="row">
          <div class="detail_label gongyuan_content">营业执照复印件(盖公章):</div>
          <div class="detail_value gongyuan_content_value detail_value_imgList">
            <img v-for="img of formData.dealerLicenseUrl" :src="img.url" :key="img.name" />
          </div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">营业执照营业范围:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerLicenseContent}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">营业执照有效期起:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerLicenseStart}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">营业执照有效期止:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerLicenseEnd}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">公司规模:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerScale}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">营业额:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerTurnover}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">代理产品:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerProduct}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">代理等级:</div>
          <div class="detail_value gongyuan_content_value">{{dealerLevel}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">代理时间:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerStart}}</div>
        </div>
      </div>

      <div class="detail_page" v-show="tabTypeInfo === 'accountInfo'">
        <div class="row">
          <div class="detail_label gongyuan_content">开户行:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerAccountAddress}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">银行卡号:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerAccountNumber}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">开户姓名:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerAccountName}}</div>
        </div>
        <div class="row">
          <div class="detail_label gongyuan_content">预留手机号:</div>
          <div class="detail_value gongyuan_content_value">{{formData.dealerAccountPhone}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDealerDetail } from '@/api/dealer/index'
export default {
  name: 'Dealerdetail',
  components: {},
  data() {
    return {
      tabTypeInfo: 'basicInfo',

      formData: {
        dealerName: undefined,
        dealerPhone: undefined,
        dealerStatus: undefined,
        dealerProportion: undefined,
        //
        dealerAddress: [],
        dealerAddressDetail: undefined,
        dealerType: undefined,
        dealerFunList: [],
        dealerRoleList: [],
        //
        areaData: [[]],
        //
        dealerUserName: undefined,
        dealerUserPhone: undefined,
        dealerUserFname: undefined,
        dealerUserFphone: undefined,
        dealerUserNumber: undefined,

        dealerUserZimgUrl: [],
        dealerUserFimgUrl: [],
        dealerLicenseUrl: [],

        dealerLicenseContent: undefined,
        dealerLicenseStart: null,
        dealerLicenseEnd: null,
        dealerScale: undefined,
        dealerTurnover: undefined,
        dealerProduct: undefined,
        dealerLevel: undefined,
        dealerStart: null,
        dealerNumber: undefined,
        dealerAccountAddress: undefined,
        dealerAccountNumber: undefined,
        dealerAccountName: undefined,
        dealerAccountPhone: undefined
      },
      dealerStatusOptions: [],
      dealerTypeOptions: [],
      dealerRoleListOptions: [],
      dealerLevelOptions: []
    }
  },
  computed: {
    ID() {
      return this.$route.query.id
    },
    dealerStatus() {
      return this.findSelectText(this.formData.dealerStatus, this.dealerStatusOptions)
    },
    dealerType() {
      return this.findSelectText(this.formData.dealerType, this.dealerTypeOptions)
    },
    dealerFunList() {
      return this.findCheckboxText(this.formData.dealerFunList, this.dealerRoleListOptions)
    },
    dealerRoleList() {
      return this.findCheckboxText(this.formData.dealerRoleList, this.dealerRoleListOptions)
    },
    dealerLevel() {
      return this.findSelectText(this.formData.dealerLevel, this.dealerLevelOptions)
    }
  },
  async created() {
    this.initDictsOptions('dealer_status', 'dealerStatusOptions')
    this.initDictsOptions('dealer_type', 'dealerTypeOptions')
    this.initDictsOptions('dealer_work_role', 'dealerRoleListOptions')
    this.initDictsOptions('dealer_level', 'dealerLevelOptions')
  },
  async mounted() {
    try {
      const res = await getDealerDetail(this.ID)
      this.formData = Object.assign(this.formData, res.data)
    } catch (error) {
      console.log(error)
    }
  },
  // 编辑类不缓存
  // async activated() {
  // },
  methods: {
    async initDictsOptions(dicts, listProps) {
      try {
        const res = await this.getDicts(dicts)
        if (res.code === 200) {
          this[listProps] = res.data.map((per) => ({
            label: per.dictLabel,
            value: per.dictValue
          }))
        }
      } catch (error) {
        console.log(error)
      }
    },
    findSelectText(value, options) {
      const obj = options.find((item) => {
        return item.value === value
      }) || { lable: '' }
      return obj.label
    },
    findCheckboxText(values, options) {
      if (values.length > 0) {
        return values
          .map((per) => {
            const obj = options.find((item) => item.value === per) || { label: '' }
            return obj.label
          })
          .join(',')
      }
      return ''
    }
  }
}
</script>

<style lang='scss'>
.dealerdetail_container {
  .detail_page {
    .detail_label {
      width: 150px;
    }
  }
}
</style>



